<template>
  <div class="admin-container">
    <admin-header />
    <admin-sidebar />
    <div class="admin-main">
      <div class="admin-content">
        <h1>控制面板</h1>
        <el-row :gutter="20" class="stats-row">
          <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #409EFF;">
                  <el-icon><user /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-title">用户总数</div>
                  <div class="stat-value">1,234</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #67C23A;">
                  <el-icon><goods /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-title">商品总数</div>
                  <div class="stat-value">567</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #E6A23C;">
                  <el-icon><document /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-title">订单总数</div>
                  <div class="stat-value">890</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
              <div class="stat-content">
                <div class="stat-icon" style="background-color: #F56C6C;">
                  <el-icon><message /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-title">消息总数</div>
                  <div class="stat-value">345</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <el-card class="chart-card">
          <div slot="header">
            <span>最近7天数据统计</span>
          </div>
          <div class="chart-container">
            <!-- 这里可以放置echarts图表 -->
            <div class="chart-placeholder">数据图表区域</div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import AdminHeader from '@/components/admin/AdminHeader.vue'
import AdminSidebar from '@/components/admin/AdminSidebar.vue'
import {
  User,
  Goods,
  Document,
  Message
} from '@element-plus/icons-vue'
</script>

<style scoped>
.admin-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.admin-main {
  margin-left: 220px;
  padding-top: 60px;
  height: 100%;
  overflow-y: auto;
  background-color: #f0f2f5;
}

.admin-content {
  padding: 20px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  margin-bottom: 20px;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
}

.chart-card {
  margin-top: 20px;
}

.chart-container {
  height: 350px;
}

.chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
  border-radius: 4px;
}
</style>